<!--数据字典管理-->
<template>
  <div>
    <a-card>
      <p slot="title">
        检索条件
      </p>
      <div class="formSearch">
        <a-form ref="acDTO" :label-width="80" layout="inline"
                @keydown.native.enter.prevent="handleSubmit">
          <a-form-item label="课程：" prop="userName" style="margin-right: 25px;">
            <a-select style="width: 250px"
                      placeholder="全部" v-model="courseId">
              <a-select-option v-for="item in courseSelectList" :value="item.value"
                               :key="item.value">{{item.label }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="学生姓名：" prop="stuName">
            <a-input v-model="stuName" placeholder="请输入学生名称搜索"
                     @keyup="formatEnterContent(stuName)"
                     @blur="formatEnterContent(stuName)" style="width: 220px">
              <a-icon slot="prefix" type="user" class="displayPre" />
              <a-icon v-if="stuName" slot="suffix" type="close-circle" @click="emitEmpty(stuName)" />
            </a-input>
          </a-form-item>
          <a-form-item label="教师姓名：" prop="teacherName">
            <a-input v-model="teacherName" placeholder="请输入教师名称搜索"
                     @keyup="formatEnterContent(teacherName)"
                     @blur="formatEnterContent(teacherName)" style="width: 220px">
              <a-icon slot="prefix" type="user" class="displayPre" />
              <a-icon v-if="teacherName" slot="suffix" type="close-circle" @click="emitEmpty(teacherName)" />
            </a-input>
          </a-form-item>
          <a-button type="primary" @click="handleSubmit"
          >查询
          </a-button>
          <a-button style="margin-left: 8px" @click="reStore">重置</a-button>
          <a-button style="margin-left: 8px" type="primary" @click="exportScore"
          >导出课程成绩
          </a-button>
        </a-form>
      </div>
    </a-card>
    <div class="commonStyle nyContent">
      <a-table :columns="columns" :dataSource="scoreManagePageData" :rowKey="record => record.recordId"
               :pagination="false">
                <span slot="index" slot-scope="text, record, index">
                    {{ (page.currentPage - 1) * page.pageSize + index + 1 }}
                </span>
      </a-table>
      <Page :totalCount="pageVal.total" :currentPage="pageVal.currentPage" ref="page"
            :pageSize="pageVal.pageSize" @changePage="changePage" @changePageSize="changePageSize" />
    </div>
    <iframe id="exportScore" style="display: none"></iframe>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import Page from 'module/pagination'
import Util from '@/libs/util';
export default {
  name: 'scoreManage',
  components: {
    Page,
  },
  data () {
    return {
      title: true,
      searchKey: '',
      courseId: '',
      stuName: '',
      teacherName: '',
      selectedNode: {id: '', name: ''},
      array: [ 10, 20, 30, 40 ],
      /*选中的记录*/
      selectedRowKeys: [],
      objDTO: {
        recordId: '',
        name: '',
        buildName: '',
        buildCode: '',
        roomCode: '0',
        diskNum: '',
      },
      page: {
        currentPage: 1,
        pageSize: 10
      },
      columns: [
        {title: '序号', key: 'index', width: '8%', align: 'center', scopedSlots: {customRender: 'index'}},
        {title: '学生姓名', dataIndex: 'stuName', key: 'stuName', width: '10%'},
        {title: '学生学号', dataIndex: 'stuCode', key: 'stuCode', width: '10%',},
        {title: '专业', dataIndex: 'majorName', key: 'majorName', },
        {title: '班级', dataIndex: 'className', key: 'className', width: '15%',},
        {title: '课程名称', dataIndex: 'courseName', key: 'courseName', width: '10%'},
        {title: '授课教师', dataIndex: 'teacherName', key: 'teacherName', width: '8%'},
        {title: '阶段总数', dataIndex: 'allStage', key: 'allStage', width: '5%'},
          {title: '已完成阶段', dataIndex: 'completeStage', key: 'completeStage', width: '5%'},
        {title: '成绩', dataIndex: 'score', key: 'score', width: '5%'},
        {title: '用时（分钟）', dataIndex: 'useTime', key: 'useTime', width: '8%'},

      ],
    }
  },
  computed: {
    courseSelectList () {
      return this.$store.state.courseManage.courseSelectList
    },
    scoreManagePageData () {
      return this.$store.state.scoreManage.scoreManagePageData
    },
    ...mapState ({
      pageVal: state => state.scoreManage.page,
    }),

  },
  filters: {
    filterWord(value, list) {
      for (let i=0; i<list.length; i++) {
        if (value === list[i].value) {
          return list[i].label
        }
      }
    },
  },
  methods: {
    exportScore () {
      if (this.courseId) {
        document.getElementById('exportScore').src = '/lab/score/export?courseId=' + this.courseId;
      }else {
        alert("请选择一个课程")
      }
    },
    emitEmpty () {
      this.searchKey = ''
      this.init ()
    },
    reStore(){
      this.searchKey = ''
      this.page.currentPage = 1
      this.init();
    },

    editDTO(Obj){
      this.objDTO = {...Obj}
      this.title = false
      this.$refs.addEdit.showEdit(this.objDTO)
    },
    addDTO(){
      this.clearDTO ()
      this.title = true
      this.$refs.addEdit.showModal ()
    },
    clearDTO(){
      this.objDTO= {
        recordId: '',
            name: '',
            buildName: '',
            buildCode: '',
            roomCode: '0',
            diskNum: '',
      }
    },
    /*
     * 过滤输入框输入的特殊字符
     * */
    formatEnterContent ( value ) {
      let a = Util.clearSpecialChart(value);
      this.searchKey = a
    },

    /**
     * Function    : init
     * Description : 初始化列表
     * Input       : none
     * Return      : none
     */
    init () {
      let para = Object.assign ({},
          {courseId: this.courseId,stuName: this.stuName,teacherName: this.teacherName,}, this.page)
      this.$store.dispatch ('getScoreManagePageListAct', para)
      this.$store.dispatch ('getCourseSelectListAct', para)
      this.$store.commit ('setScoreManageQueryPrams', para)
    },




    /**
     * Function    : changePage
     * Description : 切换页码
     * Input       : val
     * Return      : none
     */
    changePage ( val ) {
      this.page.currentPage = val
      this.init ()
    },

    /**
     * Function    : changePageSize
     * Description : 切换每页条数
     * Input       : vm
     * Return      : none
     */
    changePageSize ( vm ) {
      this.page.pageSize = vm
      this.page.currentPage = 1
      this.init ()
    },

    /**
     * Function    : handleSubmit
     * Description : 查询按钮
     * Input       : none
     * Return      : none
     */
    handleSubmit () {
      this.page.currentPage = 1
      this.init ()
    },


  },
  created () {
    this.searchKey = this.$route.query.searchKey === undefined ? '' : this.$route.query.searchKey
    this.page.currentPage = this.$route.query.currentPage === undefined ? 1 : this.$route.query.currentPage
    this.page.pageSize = this.$route.query.pageSize === undefined ? 10 : this.$route.query.pageSize
    this.init ()
  },
  mounted () {

  }
}
</script>
